<template>
  <div>
    <PageTools>
      <template #before>
        <el-button type="primary" @click="addFn">添加用户</el-button>
      </template>
      <template #after>
        <el-row type="flex">
          <el-select
            ref="agent"
            v-model="pageConfig.agent_contains"
          >
            <el-option
              label="全部经纪"
              value=""
            />
            <el-option
              v-for="(item,index) in agentList"
              :key="index"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
          <el-input v-model="pageConfig.name_contains" placeholder="请输入关键字" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="searchFn">
              筛选
            </el-button>
          </el-input>
        </el-row>
      </template>
      <!-- 表格 -->
      <template #main>
        <el-table
          border
          style="width: 100%"
          :data="clientsList"
        >
          <el-table-column
            prop="image"
            label="图片"
            width="180"
          >
            <template #default="{row}">
              <img style="width:150px;height:100px" class="showImg" :src="row.image" alt="">
            </template>

          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            width="180"
          />
          <el-table-column
            prop="email"
            label="邮箱"
          />
          <el-table-column
            prop="phone"
            label="电话"
          />
          <el-table-column
            prop="agent.name"
            label="经纪"
          />
          <el-table-column
            prop="wechat"
            label="微信"
          />
          <el-table-column
            prop="desc"
            label="介绍"
          />
          <el-table-column
            prop="operation"
            label="操作"
            width="150"
          >
            <template #default="{row}">
              <el-row type="flex">
                <el-button type="primary" size="small" @click="editClient(row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="delClient(row.id)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <el-pagination
          small
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          @current-change="currentChange"
        />
      </template>
    </PageTools>
    <addClient ref="client" :title="title" :is-show-dialog.sync="isShowDialog" :image="image" @addClient="getct" /></div>
</template>

<script>
import { getClients, delClient, getAgent, getClientCount, getClientById, searchClient } from '@/api/clientele'
import addClient from './components/add-client.vue'
export default {
  components: {
    addClient
  },
  data() {
    return {
      image: '',
      title: '新增客户',
      isShowDialog: false,
      clientsList: [],
      client: '',
      agentList: [],
      pageConfig: {
        _limit: 2,
        _start: 0,
        name_contains: '' || null,
        agent_contains: '' || null
      },
      total: 0
    }
  },
  created() {
    this.getClients()
    this.getAgent()
    this.getClientCount()
  },
  methods: {
    getct() {
      this.getClients()
      this.getClientCount()
    },
    async searchFn() {
      // console.log(129, this.pageConfig.agent_contains)
      // console.log(130, this.pageConfig.name_contains)
      this.pageConfig._start = 0
      const { data } = await searchClient(this.pageConfig)
      this.clientsList = data
      const res = await getClientCount(this.pageConfig)
      this.total = res.data

      // console.log(132, data)
    },
    async editClient(id) {
      this.title = '编辑客户'
      this.isShowDialog = true
      const { data } = await getClientById(id)
      // console.log(131, data)
      data.agent = data.agent.id
      this.$refs.client.formdata = data
      this.image = data.image
      // console.log(135, this.image)
      // console.log(131, this.$refs.client.formdata)
    },
    addFn() {
      this.isShowDialog = true
      this.title = '新增客户'
    },
    currentChange(newPage) {
      console.log(159, newPage)
      this.pageConfig._start = (newPage - 1) * (this.pageConfig._limit)
      this.getClients()
    },
    async getAgent() {
      const { data } = await getAgent()
      // console.log(104, data)
      const res = data.map(item => {
        return { id: item.id, name: item.name }
      })
      this.agentList = res
      // console.log(105, this.agentList)
    },
    async getClients() {
      const { data } = await getClients(this.pageConfig)
      this.clientsList = data
      // console.log(99, this.clientsList)
    },
    async getClientCount() {
      const { data } = await getClientCount(this.pageConfig)
      console.log(149, data)
      this.total = data
    },
    async delClient(id) {
      // console.log(150, id)
      await this.$confirm('是否确定删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      await delClient(id)
      if (this.clientsList.length === 1 && this.pageConfig._start !== 0) {
        this.pageConfig._start = this.pageConfig._start - this.pageConfig._limit
      }
      this.$message.success('删除成功')

      this.getClients()
      this.getClientCount()
    }
  }
}
</script>

<style lang="scss">
.showImg {
  object-fit: cover;
}
</style>
